<template>
  <view class="user-grade">
    <view class="head">
      <view class="user-card mb20">
        <view class="user-info acea-row row-between">
          <view class="acea-row row-center-wrapper">
            <view class="avatar acea-row row-center-wrapper">
              <image :src="userlevel.avatar"
                     v-if="userlevel.avatar && userlevel.avatar !=urlDomain+'crmebimage/presets/morenT.png'"></image>
              <image v-else class="avatar" :src="urlDomain+'crmebimage/presets/morenT.png'"></image>
            </view>
            <view class="info">
              <view class="name">
                {{ userlevel.nickname }}
              </view>
            </view>
            <view class="grade">
              <image class="image" :src="(userlevel.icon) ? userlevel.icon : '' " alt="">
            </view>

          </view>
          <view @click="goMultiple" class="rule acea-row row-center-wrapper">
            <text class="iconfont wenhao mr10">?</text>
            <view>规则说明</view>
          </view>
        </view>
      </view>
      <view v-if="next_level" class="card-wrapper" :style="'background-image: url('+userlevel.backImage+')'">
        <view class="usericon">
          <image :src="userlevel.icon"></image>
        </view>
        <view class="growth">
          <view class="title" :style="'color: '+userlevel.backColor">{{ userlevel.userLevelName }}</view>
          <view class="info" :style="'color: '+userlevel.backColor">今日获得经验值{{ userlevel.todayExp }}点</view>
        </view>
        <view class="wait">
          <view class="wait_count acea-row row-between-wrapper">
            <text class="value" :style="'color: '+userlevel.backColor">{{ userlevel.experience }}
              <text
                  class="upExperience">/{{ userlevel.upExperience }}
              </text>
            </text>
            <text v-if="userlevel.upExperience>0" class="text"
                  :style="'color: '+userlevel.backColor">距{{ userlevel.nextLevelName }}还需{{
                userlevel.upExperience > 0 && userlevel.experience >= 0 && userlevel.upExperience > userlevel.experience ? userlevel.upExperience - userlevel.experience : 0
              }}

            </text>
          </view>
          <view class="progress">
            <text class="current_value" :style="'width:'+curPercent+'%'"></text>
          </view>
        </view>
      </view>
    </view>
    <view class="ml-20 mr-20">
      <view class="grade_main">
        <view v-if="gradeList.length > 0" class="grade_privilege">
          <view class="title">会员可专项优质特权</view>
          <view class="grade_list acea-row row-between-wrapper">
            <view v-for="(item,index) in gradeList" class="item acea-row">
              <view class="picture" :class="item.status == 0 ? 'isLocked' : ''">
                <image class="bg_image" :src="item.pic"></image>
              </view>
              <view class="desc">
                <view class="name line1">{{ item.name }}</view>
                <view class="detail line1">{{ item.info }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="upgrade">
          <view class="upgrade-main">
            <view class="acea-row row-between mb-36">
              <view class="title">获取经验</view>
              <navigator hover-class='none' url='/pages/goods/exp_record/index'>
                <view class="rule acea-row row-center-wrapper">经验明细
                  <text
                      class="iconfont icon-jinru2"></text>
                </view>
              </navigator>
            </view>
            <view class="item acea-row row-between-wrapper ">
              <view class="flex-center">
                <image class="w-100 h-100" :src="urlDomain+'crmebimage/presets/qiandaotu.png'"></image>
                <view class="ml-24">
                  <view class="name">
                    签到
                  </view>
                  <view class="text">每日签到可获得经验值</view>
                </view>
              </view>
              <view v-if="userlevel.todaySign" class="get_btn">已完成</view>
              <navigator v-else class="get_btn" hover-class='none' url='/pages/merchant/user_sgin/index'>去完成
              </navigator>
            </view>
            <view v-if="userlevel.isOpenCommunity" class="mt-44 item acea-row row-between-wrapper">
              <view class="flex-center">
                <image class="w-100 h-100" :src="urlDomain+'crmebimage/presets/zhongcaotu.png'"></image>
                <view class="ml-24">
                  <view class="name">
                    发布种草{{ '（' + userlevel.noteNum + '/' + userlevel.noteMaxNum + '）' }}
                  </view>
                  <view class="text">发布一条种草可获得经验值
                    <text class="add">+{{ userlevel.noteExp }}</text>
                  </view>
                </view>
              </view>
              <navigator class="get_btn" hover-class='none' url='/pages/discover/discover_release/index'>
                {{ userlevel.noteNum == userlevel.noteMaxNum ? '已完成' : '去完成' }}
              </navigator>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class='hotList'>
      <!-- 推荐商品-->
      <recommend ref="recommendIndex" :isShowTitle="isShowTitle" @getRecommendLength="getRecommendLength"></recommend>
    </view>
    <view class="instructions" v-if="showProtocol">
      <view class="setAgCount">
        <i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
        <div class="title">会员等级规则</div>
        <view class="content">
          <jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
        </view>
      </view>
    </view>
    <view class="success" v-if="isShowbox">
      <view class="bg"></view>
      <view class="con">
        <view class="title">恭喜您升级为</view>
        <view class="upgrade">
          {{ upgradeInfo.brokerage_name }}
        </view>

        <view class="level">
          <image class="imgae" :src="upgradeInfo.brokerage_icon"></image>
        </view>
        <view class="btn" @click="close">查看我的权益</view>
        <view class='iconfont icon-guanbi3' @click="close"></view>
      </view>
    </view>
  </view>
</template>
<script>
import {
  toLogin
} from '@/libs/login.js';
import {
  myExpApi,
  memberInfo,
  brokerageNotice
} from '@/api/user.js';
import recommend from "@/components/base/recommend.vue";
import {
  mapGetters
} from "vuex";
import {
  configMap
} from '@/utils';
import parser from "../components/jyf-parser/jyf-parser";

export default {
  computed: mapGetters(['userInfo', 'isLogin']),
  components: {
    recommend,
    "jyf-parser": parser,
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      isShowTitle: true,
      userlevel: {},
      loading: false, //是否加载中
      loadend: false, //是否加载完毕
      loadTitle: '加载更多', //提示语
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      protocol: '',
      showProtocol: false,
      tagStyle: {
        img: 'width:100%;display:block;',
        video: 'width:100%;'
      },
      gradeList: [],
      hostProduct: [],
      hotScroll: false,
      hotPage: 1,
      hotLimit: 10,
      isShowbox: false,
      curLevel: {},
      next_level: {},
      growthValue: '',
      brokerage_bg: '',
      experience: '',
      curPercent: 0,
      valueList: {},
      upgradeInfo: {}
    };
  },
  onShow() {
    if (this.isLogin) {
      this.getMemberInfo();
    } else {
      toLogin();
    }
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit('scroll');
  },
  onReachBottom() {
    this.$refs.recommendIndex.get_host_product();
  },
  methods: {
    goMultiple(e) {
      uni.navigateTo({
        url: '/pages/goods/level_rule/index'
      })
    },
    getRecommendLength(e) {
      this.isNoCommodity = e == 0 ? true : false;
    },
    shareIntegral() {
      uni.setStorageSync('isIntegral', true)
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    /*升级提醒*/
    upgradeRemind() {
      let that = this;
      brokerageNotice({
        type: 1
      }).then(function (res) {
        that.isShowbox = true;
        that.upgradeInfo = res.data.level;
      }).catch(res => {
        that.isShowbox = false;
      });
    },
    // 获取会员信息
    getMemberInfo() {
      let that = this;
      myExpApi().then(res => {
        this.userlevel = res.data;
        let check1 = this.userlevel.upExperience > 0; //下级经验
        let check2 = this.userlevel.experience >= 0; //当前经验
        let check3 = Number(this.userlevel.upExperience) > Number(this.userlevel.experience);
        this.curPercent = (check1 && check2 && check3) ? ((this.userlevel
            .experience / this.userlevel.upExperience) * 100).toFixed(2) : 100; //经验进度条

      }).catch(err => {
        this.$util.Tips({
          title: err
        });
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/user/index',
          });
        }, 500)
      })
    },
    // 弹窗关闭
    close() {
      this.isShowbox = false
    },
  }
}
</script>

<style scoped lang="scss">
.icon-jinru2 {
  margin-left: 6rpx;
  font-size: 16rpx;
}

.growth {
  padding-top: 55rpx;
}

.usericon {
  width: 180rpx;
  height: 180rpx;
  position: absolute;
  display: inline-block;
  right: 40rpx;
  top: -20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.user-grade {

  .head {
    height: 446rpx;
    width: 100%;
    padding: 14rpx 45rpx 45rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #181818 0%, #505050 100%);

    .user-card {
      width: 100%;

      .user-info {
        z-index: 20;
        padding: 0 10rpx;

        .vip {
          width: 82rpx;
          height: 36rpx;
          margin-left: 12rpx;

          image {
            width: 82rpx;
            height: 36rpx;
          }
        }

        .rule {
          color: #999999;
          font-size: 24rpx;
          top: 50%;
          right: 40rpx;

          .wenhao {
            width: 22rpx;
            height: 22rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22rpx;
            border-radius: 50%;
            background-color: #AAAAAA;
            color: #181818;
            margin-left: 4rpx;
          }
        }

        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.6);

          image {
            width: 56rpx;
            height: 56rpx;
            border-radius: 50%;
            margin: auto;
          }
        }

        .info {
          margin-left: 20rpx;
          padding: 15rpx 0;

          .name {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 31rpx;

            .vip {
              display: flex;
              align-items: center;
              height: 36rpx;
              padding: 0 20rpx;
              background: rgba(0, 0, 0, 0.2);
              border-radius: 18px;
              font-size: 20rpx;
              margin-left: 12rpx;

              image {
                width: 27rpx;
                height: 27rpx;
              }
            }
          }

          .num {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);

            image {
              width: 22rpx;
              height: 23rpx;
              margin-left: 20rpx;
            }
          }
        }

        .grade {
          width: 22rpx;
          height: 22rpx;
          margin-left: 10rpx;

          .image,
          uni-image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
  }

  .card-wrapper {
    background-size: cover;
    width: 656rpx;
    height: 300rpx;
    margin: 0 auto;
    position: relative;
    padding: 0 40rpx 42rpx;
    box-sizing: border-box;
    border-radius: 22rpx 22rpx 0px 0px;

    .title {
      font-size: 40rpx;
      font-weight: 600;
    }

    .info {
      font-size: 26rpx;
      margin-top: 12rpx;
      opacity: .5;
    }

    .wait {
      margin-top: 36rpx;

      .wait_count {
        .upExperience {
          opacity: .7;
          font-size: 24rpx !important;
        }

        .text {
          opacity: .7;
          font-size: 24rpx;
        }

        .value {
          // color: #282828;
          // opacity: .7;
          font-weight: bold;
          font-size: 34rpx;
          margin-right: 6rpx;
        }

        .iconfont {
          font-size: 14rpx;
          color: #333333;
          display: inline-block;
          margin-left: 4rpx;
        }
      }

      .progress {
        width: 100%;
        height: 8rpx;
        margin-top: 10rpx;
        position: relative;

        &::after {
          content: "";
          display: inline-block;
          width: 100%;
          height: 8rpx;
          background-color: #333;
          border-radius: 13rpx;
          opacity: .3;
          position: absolute;
          top: 0;
          left: 0;
        }

        .current_value {
          display: inline-block;
          width: 240rpx;
          height: 8rpx;
          background-color: #333;
          border-radius: 13rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
        }
      }
    }

    .brokerage_icon {
      width: 177rpx;
      height: 212rpx;
      position: absolute;
      right: 60rpx;
      top: 0;
    }
  }

  .grade_main {
    text-align: center;
    padding: 38rpx 32rpx 32rpx 32rpx;
    border-radius: 24rpx;
    position: relative;
    top: -56rpx;
    background: #fff;

    &::before {
      content: "";
      display: inline-block;
      width: 26rpx;
      height: 26rpx;
      background: #ffffff;
      transform: rotate(45deg);
      position: absolute;
      top: -10rpx;
      box-shadow: -1rpx -1rpx 1rpx rgba(0, 0, 0, 0.05);
    }

    .grade_privilege {
      .title {
        display: inline-block;
        color: #786046;
        font-size: 32rpx;
        font-weight: bold;
        padding: 44rpx 54rpx 20rpx;
        background: url('');
        background-size: 100%;
      }

      .grade_list {
        .item {
          width: 330rpx;
          height: 135rpx;
          box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
          background: #ffffff;
          border-radius: 10rpx;
          padding: 25rpx 25rpx;
          margin-top: 24rpx;

          .picture {
            width: 80rpx;
            height: 80rpx;
            border-radius: 100%;
            position: relative;
            background-color: #FAF1E4;

            image,
            uni-image {
              width: 80rpx;
              height: 80rpx;
              border-radius: 100%;
            }

            &.isLocked {
              background-color: #E8E8E8;

              image,
              uni-image {
                filter: grayscale(100%);
                filter: gray;
                opacity: .5;
              }
            }

            .suozi {
              width: 26rpx;
              height: 26rpx;
              position: absolute;
              bottom: 0;
              right: 0;

              .image,
              uni-image,
              image {
                width: 26rpx;
                height: 26rpx;
                filter: none;
                opacity: 1;
              }
            }
          }

          .desc {
            margin-left: 20rpx;
            text-align: left;

            .name {
              max-width: 180rpx;
              font-size: 32rpx;
              color: #282828;
            }

            .detail {
              font-size: 24rpx;
              color: #666666;
              max-width: 180rpx;
              margin-top: 6rpx;
            }
          }
        }
      }
    }

    .upgrade {
      text-align: left;

      .rule {
        color: #666666;
        font-size: 26rpx;
      }

      .title {
        font-size: 34rpx;
        color: #282828;
        font-weight: bold;

        .name {
          margin: 0 19rpx;
        }

        image {
          width: 119rpx;
          height: 15rpx;

          &.right {
            transform: rotate(180deg);
          }
        }
      }

      .upgrade-svip {
        margin: 40rpx 0;
        background: #FFF7EC;
        border-radius: 35rpx;
        padding: 16rpx 20rpx;
        font-size: 24rpx;
        justify-content: space-between;

        .svip-view {
          color: #AE6908;
          align-items: center;
          justify-content: center;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 6rpx;
          }
        }

        .svip-btn {
          color: #B37400;
          font-size: 22rpx;

          .icon-jinru2 {
            margin-left: 6rpx;
            font-size: 16rpx;
          }
        }
      }

      .item {
        position: relative;
      }

      .name {
        font-size: 30rpx;
        color: #282828;
        font-weight: 600;
      }

      .text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 6rpx;

        .add {
          color: #DFA759;
          display: inline-block;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }

      .get_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 136rpx;
        text-align: center;
        height: 58rpx;
        color: #AE6908;
        font-size: 26rpx;
        background: linear-gradient(90deg, #FFEAB5 0%, #E7B667 100%);
        border-radius: 29rpx;
      }
    }
  }
}

.success {
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #181818 0%, #505050 100%);
  }

  .level {
    width: 222rpx;
    height: 203rpx;
    margin: 20rpx auto 0;

    uni-image,
    image {
      width: 222rpx;
      height: 203rpx;
    }
  }

  .title {
    color: #CD8D33;
    font-weight: bold;
    font-size: 36rpx;
    margin: 0 auto;
    display: inline-block;
    font-size: 26rpx;
    width: 285rpx;
    margin-top: 96rpx;
    position: relative;

    &:before,
    &:after {
      content: "";
      display: block;
      width: 52rpx;
      height: 10rpx;
      position: absolute;
      /* #ifdef MP || APP-PLUS */
      top: 9rpx;
      /* #endif */
      /* #ifdef H5 */
      top: 14rpx;
      /* #endif */
      background-image: url('');
      background-size: cover;
    }

    &:before {
      /* #ifdef MP || APP-PLUS */
      left: 0;
      /* #endif */
      /* #ifdef H5 */
      left: 0;
      /* #endif */

    }

    &:after {
      /* #ifdef MP || APP-PLUS */
      right: 0;
      /* #endif */
      /* #ifdef H5 */
      right: 0;
      /* #endif */
      transform: rotateY(180deg);
    }
  }

  .upgrade {
    font-size: 60rpx;
    text-align: ceter;
    color: #CC6C34;
    text-align: center;
    width: 100%;
    font-weight: bold;
    margin-top: 10rpx;
    font-family: 'Tahoma, Geneva, Verdana, sans-serif';
  }

  .con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 557rpx;
    height: 660rpx;
    background-image: url('');
    background-size: cover;

    .btn {
      position: absolute;
      width: 380rpx;
      height: 70rpx;
      left: 50%;
      margin-left: -185rpx;
      bottom: 77rpx;
      line-height: 70rpx;
      text-align: center;
      color: #9A5D08;
      background: linear-gradient(90deg, #EBBD7B 0%, #FFDDAC 100%);
      border-radius: 35rpx;
      font-size: 28rpx;
    }

    .icon-guanbi3 {
      color: #ffffff;
      font-size: 70rpx;
      position: absolute;
      bottom: -80rpx;
      left: 240rpx;
    }
  }
}

.instructions {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 10;
}

.instructions .setAgCount {
  background: #fff;
  width: 656rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 12rpx;
  -webkit-border-radius: 12rpx;
  padding: 52rpx;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;

  .content {
    height: 900rpx;
    overflow-y: scroll;

    ::v-deep p {
      font-size: 13px;
      line-height: 22px;
    }

    ::v-deep img {
      max-width: 100%;
    }
  }
}

.instructions .setAgCount .icon {
  font-size: 42rpx;
  color: #b4b1b4;
  position: absolute;
  top: 15rpx;
  right: 15rpx;
}

.instructions .setAgCount .title {
  color: #333;
  font-size: 32rpx;
  text-align: center;
  font-weight: bold;
}

.instructions .setAgCount .content {
  margin-top: 32rpx;
  color: #333;
  font-size: 26rpx;
  line-height: 22px;
  text-align: justify;
  text-justify: distribute-all-lines;
  height: 756rpx;
  overflow-y: scroll;
}
</style>